<template>
  <div class="app-container">
    <br />
    <el-row>
      <el-input placeholder="请输入内容" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </el-row>
    <br />
    <el-popover
      v-for="item in listData"
      :key="item.id"
      placement="top-start"
      width="200"
      trigger="hover"
      :content="item.description"
    >
      <el-card
        slot="reference"
        :body-style="{ padding: '0px' }"
        shadow="hover"
        class="card-componentitem"
        :title="item.description"
      >
        <el-image
          style="width: 100%; height: 200px"
          :src="getResourceUrl((item.cover || {}).fileId)"
          fit="fill"
        ></el-image>

        <!-- <img
          style="width:100%;height:100%"
          :src="getResourceUrl((item.cover || {}).fileId)"
          onerror="javascript:this.src='https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'"
          class="image"
        /> -->
        <div style="padding: 14px;">
          <span>{{ item.name }}</span>
          <p></p>
          <div class="bottom clearfix">
            <el-button
              icon="el-icon-view"
              @click="getScreenPreviewUrl(item.id)"
              circle
            ></el-button>
          </div>
        </div>
      </el-card>
    </el-popover>

  </div>
</template>

<script>
import resourceApi from "@/api/resource";

export default {
  components: { },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      loading: false,
      queryForm: {
        keyword: ""
      },
      listData: [],
      listLoading: true
    };
  },
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$store
        .dispatch("screen/getAll")
        .then(res => {
          res.items.forEach(i => {
            if (!i.cover) this.$set(i, "cover", {fileId:'',fileName:''});
          });
          this.listData = res.items;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getResourceUrl(fileId) {
      return resourceApi.getResourceUrl(fileId);
    },
    getScreenPreviewUrl(id) {
      let url = resourceApi.getScreenPreviewUrl(id);
      window.open(url, "_bank");
    },
    deleteScreen(id) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$store.dispatch("screen/delete", id).then(res => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.loadData();
        });
      });
    },

    copyScreen(id) {
      this.$store.dispatch("screen/copy", id).then(res => {
        this.$router.push({ path: "edit", query: { id: res.id } });
        this.loadData();
      });
    }
  }
};
</script>

<style scoped>
.card-componentitem {
  width: 350px;
  height: 320px;
  margin: 10px;
  float: left;
}
</style>
